<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="showDataArea">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>员工编号</th>
                    <th>员工姓名</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${userList}" var="user">
                    <tr id="tableData">
                        <td><input name="id" value="${user.id}"/></td>
                        <td><input name="name" value="${user.name}"/></td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>
    <button id="getData" class="btn btn-success">ajax传递多个数据</button>
    <button id="getTableData" class="btn btn-success">ajax获取table内的数据</button>

    <script type="text/javascript">

        $(document).on("click", "#getTableData", function () {
            // console.log("this is click");
            $.ajax({
                url: "${APP_PATH}/learn/queryAll",
                type: "POST",
                data: $("#tableData input").serialize(),
                dataType: "json",
                success: function () {
                    console.log("success");
                }
            })
        })

        $(document).on("click", "#getData", function () {
            console.log("this is click");
            $.ajax({
                url: "${APP_PATH}/learn/queryAll",
                type: "POST",
                data: {"id": 1, "name": "王小胖"},
                dataType: "json",
                success: function () {
                    console.log("success");
                }
            })
        })

    </script>
</body>
</html>
